<script setup lang="jsx">
import {ref} from "vue"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const props = defineProps({
  message: {
    type: String,
    default: "消息"
  },
  type: {
    type: String,
    default: "success"
  }
})


const status = ref({
  start: true,
})




const init = () => {
  setTimeout(() => {
    status.value.start = false
  },5000)
}
init()
</script>

<template>
<view :class="'message-back ' + type " v-if="status.start">
  <uni-icons v-if="type === 'success'" type="checkbox-filled" color="#66c03a" size="25"></uni-icons>
  <uni-icons v-if="type === 'error'" type="clear" color="#f44336" size="25"></uni-icons>
  <span class="msg">{{message}}</span>
</view>
</template>

<style scoped lang="scss">
  .message-back {
    .msg {
      margin-left: 10px;
      margin-top: 1vw;
      font-size: 3vw;
    }
    line-height: 1;
    width: fit-content;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    border-radius: 5px;
    animation: start_end  0.3s forwards;
  }
  .success{
    background: #eef7e9;
    color: #66c03a;
  }

  .error{
    background: #feebeb;
    color: #f44336;
  }
@keyframes start_end {
  from{
    top: 0%;
  }

  to{
    top: 5%;
  }

}
</style>